<template>
  <section class="main">
    <div class="title">
      <span>用户信息</span>
      <!-- <div>
              <el-button icon="el-icon-refresh"></el-button>
            </div> -->
    </div>
    <div class="container">
      <div class="itemBox">
        <div class="line">
          <div>账号</div>
          <div>{{ username }}</div>
        </div>
        <div class="line">
          <div>昵称</div>
          <div>{{ nickName }}</div>
        </div>
        <div class="line">
          <div>负责人邮箱</div>
          <div>{{ email }}</div>
        </div>
      </div>
      <div class="itemBox">
        <div class="line">
          <div>角色名</div>
          <div>{{ rolesName }}</div>
        </div>
        <div class="line">
          <div>负责人手机号</div>
          <div>{{ phone }}</div>
        </div>
        <div class="line">
          <div>绑定手机号</div>
          <div style="width: 111px" v-show="bindstatus == 1">{{ phone }}</div>
          <el-button
            type="primary"
            v-if="bindstatus == 0"
            @click="BindphoneVisible = true"
            >绑定</el-button
          >
          <el-button
            type="primary"
            v-if="bindstatus == 1"
            @click="centerDialogVisible = true"
            >解绑</el-button
          >
        </div>
      </div>
    </div>
    <!-- 签约信息 -->
    <div class="title" v-if="rolesId == 5">
      <span>签约信息</span>
    </div>
    <div class="container" v-if="rolesId == 5">
      <div class="itemBox">
        <div class="line">
          <div>结算周期</div>
          <div>
            <span style="margin-right: 10px">支付宝 {{ aliSettlement }}</span>
            <span>微信 {{ wxSettlement }}</span>
          </div>
        </div>
        <div class="line">
          <div>使用中通道费率</div>
          <div>
            支付宝—— {{ aliRate }}（万分比） 微信—— {{ wxRate }}（万分比）
          </div>
        </div>
        <div class="line">
          <div>已开通项目</div>
          <div>{{ project }}</div>
        </div>
      </div>
    </div>
    <!-- 通道成本 -->
    <div class="title" v-if="rolesId == 2 || rolesId == 3 || rolesId == 4">
      <span>通道成本</span>
    </div>
    <div class="container" v-if="rolesId == 2 || rolesId == 3 || rolesId == 4">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        stripe
      >
        <el-table-column
          type="index"
          align="center"
          label="序号"
        ></el-table-column>
        <el-table-column type="selection"></el-table-column>
        <el-table-column
          prop="channelName"
          align="center"
          label="通道名称"
        ></el-table-column>
        <el-table-column
          prop="wxProfitRate"
          align="center"
          label="微信成本(万分比)"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.wxProfitRate }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="aliProfitRate"
          align="center"
          label="支付宝成本(万分比)"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.aliProfitRate }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="银行卡成本">
          <template slot-scope="scope">
            <div>信用卡成本万分比：{{ scope.row.creditcardProfitRate }}</div>
            <div>储蓄卡成本万分比：{{ scope.row.debitcardProfitRate }}</div>
            <div>封顶费用（元）：{{ scope.row.debitcardTopFee / 100 }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="结算比例">
          <template slot-scope="scope">
            <div>{{ scope.row.percent }}%</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 机构限额 -->
    <div>
      <div class="title">
        <span>账户信息</span>
      </div>
      <div class="container">
        <div class="accountinfoBox">
          <div class="item">
            <div class="accounttit">当前可用额度</div>
            <div class="accountval">{{ limitinfo.sub_limit }}</div>
          </div>
          <div class="item">
            <div class="accounttit">当前总额度</div>
            <div class="accountval">{{ limitinfo.all_limit }}</div>
          </div>
          <div class="item">
            <div class="accounttit">已使用额度</div>
            <div class="accountval">{{ limitinfo.trade_limit }}</div>
          </div>
          <div class="item">
            <div class="accounttit">账户积分</div>
            <div class="accountval">{{ limitinfo.point }}</div>
          </div>
          <div class="item">
            <el-button class="recharge" @click="jumprecharge" type="primary"
              >立即充值</el-button
            >
          </div>
        </div>
      </div>
      <!-- 充值记录 -->
      <div class="title">
        <span>充值记录</span>
      </div>
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :data="chargeOrderPagelist"
          tooltip-effect="dark"
          style="width: 95%; margin: 0 auto"
          @selection-change="handleSelectionChange"
          stripe
          :header-cell-style="tableHeaderColor"
          v-loading="loading"
        >
          <el-table-column
            type="index"
            align="center"
            label="序号"
          ></el-table-column>
          <el-table-column
            prop="tradeTime"
            align="center"
            label="时间"
          ></el-table-column>
          <el-table-column prop="tradeAmount" align="center" label="充值类型">
            <template slot-scope="scope">
              <div v-if="scope.row.type == 1">初始额度</div>
              <div v-if="scope.row.type == 2">扫码充值</div>
              <div v-if="scope.row.type == 3">手动提额</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="tradeAmount"
            align="center"
            label="充值金额(元)"
          >
            <template slot-scope="scope">{{
              (scope.row.tradeAmount / 100).toFixed(2)
            }}</template>
          </el-table-column>
          <el-table-column prop="tradeRatio" align="center" label="充值比例(‰)">
            <template slot-scope="scope">{{
              (scope.row.tradeRatio / 10).toFixed(1)
            }}</template>
          </el-table-column>
          <el-table-column prop="instLimitAdd" align="center" label="新增额度">
            <template slot-scope="scope">{{
              (scope.row.instLimitAdd / 100).toFixed(2)
            }}</template>
          </el-table-column>

          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="120"
          >
            <template>
              <el-button type="text" size="small">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="sizechange"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="combined"
            :current-page.sync="cur_page"
          ></el-pagination>
        </div>
      </div>
    </div>

    <!-- 商户流量包 -->
    <div v-if="merPointFlag">
      <!-- <div> -->
      <div class="title">
        <span>流量包信息</span>
      </div>
      <div class="mpContainer">
        <div class="itemBox">
          <div class="line">
            <div>商户名</div>
            <div>{{ merPointInfo.merchantName }}</div>
          </div>
          <div class="line">
            <div>商户号</div>
            <div>{{ merPointInfo.merchantNo }}</div>
          </div>
        </div>
        <div class="merPointInfoBox">
          <div class="item">
            <div class="accounttit">当前可用额度</div>
            <div
              v-if="merPointInfo.point > merPointInfo.warnValue"
              class="accountval"
            >
              {{ merPointInfo.point }}
            </div>
            <div v-else-if="merPointInfo.point < 0" class="debt">
              {{ merPointInfo.point }}
            </div>
            <div v-else class="warn">{{ merPointInfo.point }}</div>
          </div>
          <div class="item">
            <div class="accounttit">充值比例</div>
            <div class="accountval">{{ merPointInfo.limitRatio / 10 }}‰</div>
          </div>
          <div class="item">
            <div class="accounttit">充值系数</div>
            <div class="accountval">{{ merPointInfo.limitMul / 100 }}</div>
          </div>
          <div class="item">
            <div class="accounttit">预警阈值</div>
            <div class="accountval">{{ merPointInfo.warnValue }}</div>
          </div>
          <div class="item">
            <el-button class="recharge" @click="jumprecharge" type="primary"
              >立即充值</el-button
            >
          </div>
        </div>
      </div>
      <!-- 流量账单 -->
      <div class="title">
        <span>流量账单</span>
      </div>
      <div class="mpContainer" style="padding: 0px !important">
        <div class="mpSearchBox">
          <div class="leftBox">
            <div class="leftitem">
              <div class="block">
                <el-date-picker
                  v-model="ctime"
                  type="daterange"
                  align="right"
                  unlink-panels
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :clearable="false"
                  :default-time="['00:00:00', '23:59:59']"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </div>
            </div>
          </div>
          <div class="rightBox">
            <div class="rightitem">
              <el-button
                icon="el-icon-search"
                type="primary"
                @click="searchMpr"
                :disabled="mpSearchDisable"
              >
                搜索
              </el-button>
            </div>
          </div>
        </div>
        <div class="tableBox">
          <el-table
            ref="multipleTable"
            :data="mpChargePagelist"
            tooltip-effect="dark"
            style="width: 95%; margin: 0 auto"
            @selection-change="mpHandleSelectionChange"
            stripe
            :header-cell-style="mpTableHeaderColor"
            v-loading="loading"
          >
            <el-table-column
              prop="createTime"
              align="center"
              label="出账时间"
            ></el-table-column>
            <el-table-column prop="tradeAmount" align="center" label="账单类型">
              <template slot-scope="scope">
                <div v-if="scope.row.type == 1">流量充值</div>
                <div v-if="scope.row.type == 2">流量扣减</div>
                <div v-if="scope.row.type == 3">人工提额</div>
                <div v-if="scope.row.type == 4">人工降额</div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="充值时间?充值订单号"
              :render-header="renderheader"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.tradeTime }}</div>
                <div>{{ scope.row.tradeNo }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="tradeAmount"
              align="center"
              label="充值金额(元)"
            >
              <template slot-scope="scope">{{
                (scope.row.tradeAmount / 100).toFixed(2)
              }}</template>
            </el-table-column>
            <el-table-column
              prop="limitRatio"
              align="center"
              label="充值比例(‰)"
            >
              <template slot-scope="scope">{{
                (scope.row.limitRatio / 10).toFixed(1)
              }}</template>
            </el-table-column>
            <el-table-column
              prop="point"
              align="center"
              label="变更额度"
            ></el-table-column>
            <el-table-column
              prop="pointBefore"
              align="center"
              label="变更前额度"
            ></el-table-column>
            <el-table-column
              prop="pointAfter"
              align="center"
              label="变更后额度"
            ></el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              background
              @current-change="mpHandleCurrentChange"
              @size-change="mpSizechange"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="mpCombined"
              :current-page.sync="mpCurPage"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <br />
    <el-dialog
      title="绑定手机号"
      :visible.sync="BindphoneVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules2"
        label-width="0px"
        class="ms-content"
      >
        <el-form-item prop="CellPhone" ref="phone" class="ms-content1">
          <el-input
            v-model="form.CellPhone"
            size="medium"
            placeholder="请输入手机号"
          >
            <el-select placeholder="+86"></el-select>
            <i slot="prefix" class="el-input__icon el-icon-user"></i>
          </el-input>
        </el-form-item>

        <el-form-item prop="VerificationCode" class="ms-content1">
          <el-input
            v-model="form.VerificationCode"
            size="medium"
            placeholder="请输入验证码"
          >
            <i slot="prefix" class="el-input__icon el-icon-lock"></i>

            <el-button
              slot="suffix"
              :disabled="disabled"
              @click="getCode"
              class="vButton"
            >
              <span class="Time">{{ btnTxt }}</span>
            </el-button>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="BindphoneVisible = false">取 消</el-button>
        <el-button type="primary" @click="bindPhoneFunc">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="解除绑定"
      :visible.sync="centerDialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        ref="unBindFrom"
        :model="unBindFrom"
        :rules="rules2"
        label-width="0px"
        class="ms-content"
      >
        <el-form-item prop="CellPhone" ref="phone" class="ms-content1">
          <el-input v-model="phone" size="medium" placeholder="请输入手机号">
            <el-select placeholder="+86"></el-select>
            <i slot="prefix" class="el-input__icon el-icon-user"></i>
          </el-input>
        </el-form-item>

        <el-form-item prop="VerificationCode" class="ms-content1">
          <el-input
            v-model="unBindFrom.VerificationCode"
            size="medium"
            placeholder="请输入验证码"
          >
            <i slot="prefix" class="el-input__icon el-icon-lock"></i>

            <el-button
              slot="suffix"
              :disabled="disabled"
              @click="getCode2"
              class="vButton"
            >
              <span class="Time">{{ btnTxt }}</span>
            </el-button>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="unBindPhoneFunc">确 定</el-button>
      </span>
    </el-dialog>
  </section>
</template>

<script>
import {
  getPaymentList,
  getSignInfoMerchant,
  findUserInst,
  recharge,
  chargeOrderPage,
  findMerPoint,
  merChargeOrderPage,
  APIBindPhone,
  APIgetPhoneCode,
  APIunBindPhone,
  APIunBindInfo,
} from "@/api/api";

export default {
  data() {
    return {
      centerDialogVisible: false,
      form: {
        CellPhone: "",
        VerificationCode: "",
      },
      unBindFrom: {
        VerificationCode: "",
      },
      disabled: false,
      btnTxt: "获取验证码",
      BindphoneVisible: false,
      userinfo: "",
      bindstatus: "",
      rolesId: "",
      fid: "",
      username: "", //账号
      email: "", //负责人邮箱
      nickName: "", //昵称
      rolesName: "", //角色名
      phone: "", //负责人手机号
      visible: false,
      tableData: [],
      aliRate: 0,
      wxRate: 0,
      aliSettlement: "",
      wxSettlement: "",
      availableChannels: "",
      project: "",
      merPointId: "",
      merPointFlag: false,
      merPointInfo: {},
      mpCombined: 0,
      mpCurPage: 1,
      mpCurSize: 10,
      mpMultipleSelection: [],
      mpChargePagelist: [],
      mpSearchDisable: false,
      rechargearr: [],
      multipleSelection: [],
      loading: false,
      combined: 0,
      cur_page: 1,
      isopenlimit: false,
      limitinfo: "",
      chargeOrderPagelist: [],
      ctime: "",
      pickerOptions: {
        disabledDate(time) {
          let nowDate = new Date();
          let date = {
            year: nowDate.getFullYear(),
            month: nowDate.getMonth() + 1,
            date: nowDate.getDate() - 1,
          };
          let timeDate =
            date.year + "-" + date.month + "-" + date.date + " 23:59:59";
          let times = new Date(timeDate).getTime();
          return time.getTime() > times;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  created() {
    this.userinfo = JSON.parse(sessionStorage.getItem("userInfo"));
    this.bindstatus = this.userinfo.bindstatus;
    this.getPermissions();
    if (this.rolesId == 2 || this.rolesId == 3 || this.rolesId == 4) {
      this.getPaymentList();
    }
    if (this.rolesId == 5) {
      this.getSignInfoMerchant();
    }
    this.findUserInst();
  },
  methods: {
    getBIndInfo() {
      APIunBindInfo({ id: this.userinfo.id }).then((res) => {
        console.log("res======", res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          this.phone = res.data.phone;
          this.bindstatus = res.data.bindstatus;
          this.userinfo.bindstatus =  res.data.bindstatus
          // console.log('this.userinfo',this.userinfo);
          sessionStorage.setItem("userInfo", JSON.stringify(this.userinfo));
          // console.log('JSON.stringify(this.userinfo)');
          // console.log(JSON.parse(sessionStorage.getItem("userInfo")));
        } else {
          this.$message.error(res.message);
        }
      });
    },
    unBindPhoneFunc() {
      APIunBindPhone({
        id: this.userinfo.id,
        code: this.unBindFrom.VerificationCode,
      }).then((res) => {
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          this.$message({
            message: "解绑成功",
            type: "success",
          });
          this.centerDialogVisible = false;
          this.getBIndInfo();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 倒计时方法
    timer() {
      if (this.time > 0) {
        this.time--;
        // console.log(this.time);
        this.btnTxt = this.time + "s后重新获取验证码";
        setTimeout(this.timer, 1000);
      } else {
        this.time = 0;
        this.btnTxt = "获取验证码";
        this.disabled = false;
      }
    },
    //获取手机验证码方法
    getCode() {
      // 校验手机号码
      if (!this.form.CellPhone) {
        //号码校验不通过
        this.$message({
          message: "请输入手机号",
          type: "warning",
        });
        //正则判断 从1开始，第二位是35789中的任意一位，以9数字结尾
      } else if (!/^1[3-9]\d{9}$/.test(this.form.CellPhone)) {
        // 失去焦点后自动触发校验手机号规则
        this.$message({
          message: "请输入正确手机号",
          type: "warning",
        });
      } else {
        this.time = 60;
        this.disabled = true;
        //调用倒计时方法
        this.timer();
        // 封装的axios接口
        APIgetPhoneCode({
          phone: this.form.CellPhone,
        }).then((res) => {
          if (res.code === 200) {
            this.$message({
              message: "发送成功",
              type: "success",
            });
          } else {
            this.$message({
              message: "发送失败",
              type: "warning",
            });
          }
        });
      }
    },
    getCode2() {
      this.time = 60;
      this.disabled = true;
      //调用倒计时方法
      this.timer();
      // 封装的axios接口
      APIgetPhoneCode({
        phone: this.phone,
      }).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "发送成功",
            type: "success",
          });
        } else {
          this.$message({
            message: "发送失败",
            type: "warning",
          });
        }
      });
    },

    bindPhoneFunc() {
      APIBindPhone({
        phone: this.form.CellPhone,
        id: this.userinfo.id,
        code: this.form.VerificationCode,
      }).then((res) => {
        console.log("res==", res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          this.$message({
            message: "绑定成功",
            type: "success",
          });
          this.BindphoneVisible = false;
          this.getBIndInfo();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //修改thead 背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;";
      }
    },
    getPermissions() {
      var aaa = sessionStorage.getItem("userInfo");
      var bbb = JSON.parse(aaa);
      console.log(bbb);
      this.username = bbb.username;
      this.nickName = bbb.nickName;
      this.email = bbb.email;
      this.rolesName = bbb.rolesName;
      this.phone = bbb.phone;
      this.rolesId = bbb.rolesId;
      this.fid = bbb.fid;
    },
    getPaymentList() {
      var type = null;
      if (this.rolesId == 2) {
        type = 1;
      } else if (this.rolesId == 3) {
        type = 2;
      } else if (this.rolesId == 4) {
        type = 3;
      }
      getPaymentList({
        type: type,
        fid: this.fid,
      }).then((res) => {
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          this.tableData = res.data;
        } else if (res.code == 500) {
          this.$message.error(res.message);
        }
      });
    },
    getSignInfoMerchant() {
      //签约信息
      getSignInfoMerchant({}, this.fid).then((res) => {
        console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          this.aliRate = res.data.aliRate;
          this.wxRate = res.data.wxRate;
          this.aliSettlement = res.data.aliSettlement;
          this.wxSettlement = res.data.wxSettlement;
          this.project = res.data.project.join("、");
          this.merPointId = res.data.pointId;
          if (this.merPointId != null) {
            this.merPointFlag = true;
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
            const year = start.getFullYear();
            const month = start.getMonth() + 1;
            const date = start.getDate();
            if (month < 10) {
              const date1 = year + "-" + 0 + month + "-" + date;
              const date2 = year + "-" + 0 + month + "-" + date;
              this.ctime = [date1, date2];
            } else {
              const date1 = year + "-" + month + "-" + date;
              const date2 = year + "-" + month + "-" + date;
              this.ctime = [date1, date2];
            }
            this.findMerPoint();
          } else {
            this.merPointFlag = false;
          }
          // this.availableChannels = res.data.availableChannels.join('、')
        } else if (res.code == 500) {
          this.$message.error(res.message);
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 分页导航
    handleCurrentChange(val) {
      this.cur_page = val;
      this.chargeOrderPage();
      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    // 分页数量
    sizechange(val) {
      this.cur_size = val;
      this.chargeOrderPage();

      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    // 查询额度
    findUserInst() {
      findUserInst({}).then((res) => {
        console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          this.isopenlimit = true;
          this.limitinfo = res.data;
          this.chargeOrderPage();
        }
      });
    },
    // 充值列表
    chargeOrderPage() {
      chargeOrderPage({
        instNo: this.limitinfo.instNo,
        page: this.cur_page,
        size: this.cur_size,
      }).then((res) => {
        console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          this.chargeOrderPagelist = res.data;
          this.combined = res.pageInfo.recordCount;
        }
      });
    },
    // 查询额度
    findMerPoint() {
      findMerPoint({}, this.merPointId).then((res) => {
        console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          this.merPointInfo = res.data;
          this.merChargeOrderPage();
        }
      });
    },
    mpTableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;";
      }
    },
    mpHandleSelectionChange(val) {
      this.mpMultipleSelection = val;
    },
    // 分页导航
    mpHandleCurrentChange(val) {
      this.mpCurPage = val;
      this.merChargeOrderPage();
      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    // 分页数量
    mpSizechange(val) {
      this.mpCurSize = val;
      this.merChargeOrderPage();
      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    // 积分记录列表
    merChargeOrderPage() {
      merChargeOrderPage({
        merchantId: this.fid,
        startDate: this.ctime[0],
        endDate: this.ctime[1],
        page: this.mpCurPage,
        size: this.mpCurSize,
      }).then((res) => {
        console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          this.mpSearchDisable = false;
          this.loading = false;
          this.mpChargePagelist = res.data.records;
          this.mpCombined = res.data.total;
        }
      });
    },
    searchMpr() {
      this.loading = true;
      this.mpSearchDisable = true;
      this.merChargeOrderPage();
    },
    // 跳充值
    jumprecharge() {
      this.$router.push("/recharge");
      sessionStorage.setItem("instNos", this.limitinfo.instNo);
      sessionStorage.setItem("limitMul", this.limitinfo.limitMul);
      sessionStorage.setItem("limitRatio", this.limitinfo.limitRatio);
    },
    renderheader(h, { column, $index }) {
      return h("span", {}, [
        h("span", {}, column.label.split("?")[0]),
        h("br"),
        h("span", {}, column.label.split("?")[1]),
      ]);
    },
  },
};
</script>

<style scoped lang="less">
.ms-content {
  padding: 30px 30px;
}
.ms-content1 {
  margin-bottom: 25px;
}
.validation {
  margin-bottom: 20px;
  display: flex;
  width: 100%;
  margin-bottom: 25px;
  position: relative;
}
.wid {
  width: 60%;
}
/deep/ .vButton {
  margin-right: -5px;
  padding: 11px 16px;
}
.title {
  background: #fff;
  padding: 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}

.container {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.mpContainer {
  float: left;
  width: 100%;
  margin-bottom: 20px;
  box-sizing: border-box;
  padding: 30px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.itemBox {
  width: 50%;
}

.itemBox .line {
  width: 100%;
  display: flex;
  font-size: 14px;
  line-height: 200%;
}

.itemBox .line div:nth-child(1) {
  width: 20%;
  text-align: left;
}

.itemBox .line div:nth-child(2) {
  width: 80%;
  text-align: left;
  color: #888888;
}

.accountinfoBox {
  width: 100%;
  display: flex;
  align-items: center;
  .item {
    width: 20%;
    text-align: center;
    .accountval {
      color: #2e71d9;
      font-size: 22px;
    }
  }
  .recharge {
    width: 70%;
  }
}

.merPointInfoBox {
  margin-top: 15px;
  width: 100%;
  display: flex;
  align-items: center;
  .item {
    width: 20%;
    height: 50px;
    .accountval {
      color: #2e71d9;
      font-size: 22px;
      line-height: 24px;
    }
    .debt {
      color: red;
      font-size: 22px;
      line-height: 24px;
    }
    .warn {
      color: orange;
      font-size: 22px;
      line-height: 24px;
    }
  }
  .recharge {
    width: 70%;
  }
  .adjust-point {
    width: 70%;
  }
}

.mpSearchBox {
  width: 100%;
  display: flex;
  background: #fff;
  margin: 0px auto;

  .leftBox,
  .rightBox {
    padding: 10px 0 0 2.5%;
    box-sizing: border-box;
  }
  .leftBox > .leftitem {
    margin-bottom: 15px;
  }
  .rightBox > .rightitem {
    margin-bottom: 15px;
  }
}

.tableBox {
  width: 100%;
  background: #fff;
}
</style>
